import { useStore } from 'vuex'
import { computed, ref, watch } from 'vue'

export default function useCd() {
  const cdRef = ref(null)
  const cdImageRef = ref(null)

  const store = useStore()
  // 获取播放状态
  const playing = computed(() => store.state.playing)

  // 根据判断是否播放而旋转
  const cdCls = computed(() => {
    return playing.value ? 'playing' : ''
  })
  // 监听播放开关，如果没有新的歌曲，光盘将在原来的地方开始旋转
  watch(playing, (newPlaying) => {
    if (!newPlaying) {
      // 光盘外层， 光盘内层
      syncTransform(cdRef.value, cdImageRef.value)
    }
  })

  function syncTransform(wrapper, inner) {
    // 外层
    const wrapperTransform = getComputedStyle(wrapper).transform
    // 内层
    const innerTransform = getComputedStyle(inner).transform
    // console.log(typeof innerTransform)
    // 就是说将内层赋值给外层后，外层的角度发生了一个变化，那么相对元素发生了一个变化，自然内部图片就会跳动一个角度，所以我们要同步
    // wrapper.style.transform = innerTransform
    wrapper.style.transform =
      wrapperTransform === 'none'
        ? innerTransform
        : innerTransform.concat(' ', wrapperTransform) // concat 也可以用于字符串的拼接，用于两个角度的叠加为新的角度
  }
  return {
    cdCls,
    cdRef,
    cdImageRef
  }
}
